// ==========================================================================
// Plugin icon
// ==========================================================================

.plugin-icon {
	float: left;
	margin-right: 16px;
	width: 56px;
	height: 56px;
	position: relative;
	transition: opacity 0.15s ease-in-out;

	@include breakpoint-deprecated( '<480px' ) {
		width: 40px;
		height: 40px;
	}
	@include breakpoint-deprecated( '>480px' ) {
		margin-right: 24px;
	}

	.gridicon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50% );
		width: 24px;
		height: 24px;
		fill: var( --color-text-inverted );
	}
	&.is-placeholder {
		background-color: var( --color-neutral-0 );
		animation: loading-fade 1.6s ease-in-out infinite;
		opacity: 0.3;
	}
	&.is-fallback {
		background: var( --color-neutral-10 );
	}
}

.plugin-icon__img {
	width: 100%;
	height: 100%;
}
